@charset "utf-8";

@function px($px){
    @return  ($px/2);
}
$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}

#web{
    width: 100%;
    height: 100%;
    position: relative;
    
    header{
        width: 100%;
        height: r(110);
        position: absolute;
        top: 0;
        input{
            width: r(120);
             height: r(60);
             border: 1px solid #FF9344;
             border-radius: 25px;
             background: #FFFFFF;
             font-size: r(30);
             float: left;
             margin-top: r(48);
             margin-left: r(24);
        }//input
        .xiala{
            width: r(160);
            height: r(56);
            border: 1px solid #FF9344;
            font-size: r(30);
            float: right;
            margin-top: r(48);
            background: url(../img/xiala_05.jpg)no-repeat r(30) center;
            margin-right: r(18);
        }//xiala
        p{
            width: r(80);
            height: r(35);
            text-align: center;
            line-height: r(35);
            font-size: r(40);
            margin: 0 auto;
            padding-top: r(60);
        }//p
    }//header
    section{
         width: 100%;
         position: absolute;
         top: r(110);
         bottom: 68px;
         overflow: scroll;
         -webkit-overflow-scrolling: touch;
//       background: lightgoldenrodyellow;
         .secBox1{
             width: 100%;
             height: r(278);
             ul{
                 
                 li{
                     float: left;
                     width: r(150);
                     height: r(150);
                     margin-left: r(19);
                     margin-right: r(18);
                     margin-top: r(20);
                     
                     img{
                         width: 100%;
                         height: 100%;
                     }
                 }
             }
             .secBox1-1{
                     li{
                     float: left;
                     width: r(150);
                     height: r(50);
                     margin-left: r(19);
                     margin-right: r(18);
                     margin-top: r(5);
                     text-align: center;
                     }
                     
             }
         }//secBox1
         .secBox2{
             width: r(705);
             height: r(68);
             margin: 0 auto;
             .secBox2-1{
                 img{
                    width: r(73);
                    height: 100%; 
                    float: left;
                 }
                 span{
                     float: left;
                     font-size: r(30);
                     line-height: r(68);
                 }
             }
             .secBox2-2{
                 span{
                     font-size: r(30);
                     float: right;
                     line-height: r(68);
                 }
                 i{
                     height: 100%;
                     float: right;
                     font-size: r(30);
                     line-height: r(68);
                     color: #FF9344;
                     
                 }
             }
             
         }//secBox2
         .secBox3{
             width: r(705);
             height: r(205);
             margin: 0 auto;
             ul{
                 li{
                     float: left;
                     width: r(132);
                     height: r(132);
                     margin-right: r(59);
                     margin-top: r(45);
                     img{
                         width: 100%;
                         height: 100%;
                     }
                     
                 }
                 .ying{
                     margin-right: 0;
                 }
             }
         }//secBox3
    }//section
    footer{
         width: 100%;
         height: r(136);
         position: absolute;
         bottom: 0;
         background: white;
        a{
            color: black;
        }//a
        ul li{
            width: 25%;
            height: r(136);
            float: left;
            text-align: center;
                       
            .iconfont{
                color: transparent;
                font-size: r(60);
                -webkit-text-stroke: 1px #FF9344;
            }
            &.active .iconfont{
                  color: #FF9344;
            }
            p{
              font-size: r(32);
              color: black;
            }
            &:hover .iconfont{
              color: yellow;
            }
        }
    }//footer
}//web
